<template>
  <div v-html="compiledMarkdown"></div>
</template>

<script setup>
import MarkdownIt from "markdown-it";
import markdownItMathjax3 from "markdown-it-mathjax3";

const md = new MarkdownIt({
  html: true, // 允许 HTML 标签在 Markdown 中（注意安全性）
  xhtmlOut: true, // 使用 XHTML 输出格式
  breaks: true, // 将单个换行符转换为 <br> 标签
  langPrefix: "language-", // 为代码块添加 CSS 类名的前缀
  linkify: true, // 自动将类似 URL 的文本转换为链接
  typographer: true, // 启用一些排版替换和增强功能
  quotes: "“”‘’", // 自定义引号替换
  highlight: null, // 代码块高亮函数（可以设置为自定义函数或使用其他库）
  show: true,
});

md.use(markdownItMathjax3, {
  // 可以在这里配置 Katex 插件的选项
});

const props = defineProps({
  content: {
    type: String,
    required: true,
  },
});

const compiledMarkdown = computed(() => md.render(props.content));
</script>
